<template>
  <div :id="id" style="width: 100%; height: 300px"></div>
</template>
<script>
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      data: [],
      name: ''
    };
  },
  mounted() {},
  methods: {
    init({data, name}) {
      this.data = JSON.parse(JSON.stringify(data))
      this.name = name
      this.renderChart()
    },
    renderChart() {
      let chart = this.$echarts.init(document.getElementById(this.id), 'macarons')
      let data = []
      this.data.forEach(v => {
        data.push({
          name: v.key,
          value: v.doc_count
        })
      })
      let option = {
        tooltip: {
          confine: true,
          show: true,
          // trigger: 'item',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            fontWeight: "normal",
            color: "#000",
          },
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "74%",
          top: "20px",
          itemGap: 20,
          // itemWidth: 6,
          // itemHeight: 6,
          data: data,
          formatter: function (name) {
            return name.length > 20 ? name.slice(0, 8) + "..." : name;
          },
        },
        grid: {
          top: 10,
        },
        // color: Ecolors.color,
        series: [
          {
            type: 'pie',
            name: this.name,
            radius: ["40%", "55%"],
            center: ["35%", "48%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff",
              },
            },
            data: data,
          },
        ],
      }
      chart.setOption(option)
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-weight: bold;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
}
</style>